<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>login</title>
		<link rel="stylesheet" href="login.css">
		<link rel="stylesheet" href="../图标/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css">
	</head>
	<body>
		<article class="box" id="login">
			<form id="login-up">
				<h2>login</h2>
				<div class="inputBox">
					<i class="fa fa-user " aria-hidden="true" style="position: absolute;top: 10px;left: -25px;color: #EEEEEE;"></i><input type="text" name="" required="" >
					<label>Username</label>
				</div>
				<div class="inputBox">
					<i class="fa fa-key " aria-hidden="true" style="position: absolute;top: 10px;left: -25px;color: #EEEEEE;"></i><input type="password" name="" required="" id="psw">
					<label>password</label>
					<i id="eye" class="fa fa-eye-slash" aria-hidden="true" style="position: absolute;top: 10px;right: 7px;color: #EEEEEE;"></i>
				</div>
				<input type="submit" name="" value="submit">
				<div>
					<span class="login-account">Can't have an Account?</span>
					<a href="sign up.html" class="login-signup" id="sign-in">Sign in</a>
				</div>
			</form>
		</article>
	</body>
	<script>
	       var password = document.getElementById('psw');
	       var anniu = document.getElementById('eye');
	       anniu.addEventListener('click',function(){
	           if(password.type==='password')
	           {
	               password.setAttribute('type','text');
	               eye.className = 'fa fa-eye';
	           }else{
	            password.setAttribute('type','password');
	               eye.className = 'fa fa-eye-slash';
	           }
	       })
	   </script>
</html>